import { getProjectTaskExecutePage } from '@/services/api/api-promotion-execute';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Tag } from 'antd';
import 'dayjs/locale/zh-cn';
import moment from 'moment';
import React, { useRef } from 'react';
import { useAccess } from 'umi';
import DetailsPromotionProject from './DetailsPromotionProject';

interface TablePromotionProjectProps { }

const TablePromotionProject: React.FC<TablePromotionProjectProps> = ({ }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<PromotionData.Project>[] = [
    {
      title: '状态',
      dataIndex: 'run',
      copyable: true,
      ellipsis: true,
      width: '80px',
      valueType: 'select',
      valueEnum: {
        1: { text: '进行中' },
        2: { text: '已结束' },
        3: { text: '已暂停' },
      },
      render: (_, row) => {
        return (
          <Tag color={row.run === 1 ? 'green' : row.run === 2 ? 'red' : 'orange'}>
            {row.run === 1 ? '进行中' : row.run === 2 ? '已结束' : '已暂停'}
          </Tag>
        );
      },
    },
    {
      title: '标题',
      dataIndex: 'name',
      copyable: true,
      ellipsis: true,
      width: '30%',
      render: (_, row) => {
        return (
          <DetailsPromotionProject
            showType={'execute'}
            project={row}
            onRefurbish={function (): void { }}
          />
        );
      },
    },
    {
      title: '任务类型',
      width: '20%',
      key: 'taskTypes',
      valueType: 'select',
      fieldProps: {
        mode: 'multiple',
        allowClear: true,
        showSearch: true,
        optionFilterProp: 'children',
        filterOption: (input: any, option: any) => {
          console.log(option);
          return option.label.includes(input);
        },
        options: [
          { value: '1', label: '公众号' },
          { value: '2', label: '视频号' },
          { value: '3', label: '抖音' },
        ],
      },
      render: (_, row) => {
        return (
          <div>
            {row.taskTypes != undefined &&
              row.taskTypes.map((item) => (
                <Tag key={item} color={item === 1 ? '#1CAE1B' : item === 2 ? '#F5A34D' : '#060716'}>
                  {item === 1 ? '公众号' : item === 2 ? '视频号' : '抖音'}
                </Tag>
              ))}
          </div>
        );
      },
    },

    {
      title: '任务量',
      search: false,
      render: (_, row) => {
        return <span>{row.taskCount}</span>;
      },
    },
    {
      title: '截至日期',
      key: 'deadlines',
      dataIndex: 'deadline',
      valueType: 'dateRange',
      fieldProps: {
        allowClear: true,
        placeholder: ['开始日期', '结束日期'],
        format: 'YYYY-MM-DD',
        ranges: {
          今日: [moment(), moment()],
          本月: [moment().startOf('month'), moment().endOf('month')],
          上月: [
            moment().startOf('month').subtract(1, 'months'),
            moment().endOf('month').subtract(1, 'months'),
          ],
          最近7天: [moment().subtract(6, 'days'), moment()],
          最近60天: [moment().subtract(59, 'days'), moment()],
          最近90天: [moment().subtract(89, 'days'), moment()],
        },
      },
      render: (_, row) => {
        return <span>{row.deadline}</span>;
      },
    },
    {
      title: '创建时间',
      key: 'createdTimes',
      dataIndex: 'createdTime',
      valueType: 'dateRange',
      fieldProps: {
        allowClear: true,
        placeholder: ['开始日期', '结束日期'],
        format: 'YYYY-MM-DD',
        ranges: {
          今日: [moment(), moment()],
          本月: [moment().startOf('month'), moment().endOf('month')],
          上月: [
            moment().startOf('month').subtract(1, 'months'),
            moment().endOf('month').subtract(1, 'months'),
          ],
          最近7天: [moment().subtract(6, 'days'), moment()],
          最近60天: [moment().subtract(59, 'days'), moment()],
          最近90天: [moment().subtract(89, 'days'), moment()],
        },
      },
      render: (_, row) => {
        return <span>{row.createdTime}</span>;
      },
    },
  ];

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    const response = await getProjectTaskExecutePage({ ...params });
    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };

  return (
    <PageContainer>
      <ProTable<PromotionData.Project>
        columns={columns}
        actionRef={actionRef}
        cardBordered
        rowKey="id"
        tableLayout="fixed"
        dateFormatter="string"
        request={request}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
        toolBarRender={() => []}
      />
    </PageContainer>
  );
};
export default TablePromotionProject;
